<template>
  <div class="page-wide">
    <a-row :gutter="24">
      <a-col :lg="24" :md="24" :sm="24">
        <session-count></session-count>
      </a-col>
    </a-row>
    <a-row :gutter="24">
      <usage-count></usage-count>
    </a-row>
    <a-row :gutter="24">
      <table-space></table-space>
    </a-row>
  </div>
</template>

<script>
// import moment from 'moment'
import sessionCount from './modules/dataService/sessionCount'
import usageCount from './modules/dataService/usageCount'
import tableSpace from './modules/dataService/tableSpace'
export default {
  name: 'DatabaseServices',
  components: {
    sessionCount,
    usageCount,
    tableSpace
  },
  data () {
    return {
      loading: true
    }
  },
  created () {
  },
  mounted () {
    // 轮询接口
    const timers = window.setInterval(() => {
      setTimeout(res => {
      }, 0)// 利用定时器清除setInterval的每次叠加
    }, 60000)// 1分钟执行一次
    // this.once在离开当前路由时销毁定时器
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timers)
    })
  },
  /**
   * 数字格式化为千分位
   */
  filters: {
    format: function (value) {
      return value.toLocaleString()
    }
  },
  methods: {
  }
}
</script>

<style lang="less" scoped>
  .data-empty {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, .7);
    color: #888;
    font-size: 14px;
  }
  .table-list{
    .ant-card{
      /deep/ .ant-card-body{
        padding: 0 10px;
        .ant-table-small{
          border: none;
        }
      }
    }
  }
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  .antd-pro-pages-dashboard-analysis-twoColLayout {
    position: relative;
    display: flex;
    display: block;
    flex-flow: row wrap;
  }

  .antd-pro-pages-dashboard-analysis-salesCard {
    height: calc(100% - 24px);
    /deep/ .ant-card-head {
      position: relative;
    }
  }

  .dashboard-analysis-iconGroup {
    i {
      margin-left: 16px;
      color: rgba(0,0,0,.45);
      cursor: pointer;
      transition: color .32s;
      color: black;
    }
  }
  .analysis-salesTypeRadio {
    position: absolute;
    right: 54px;
    bottom: 12px;
  }
</style>
